<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>

</html>
<script>
    //封装过程中的回调函数改成promise
    function objtostring(obj) {
        if (Object.prototype.toString.call(obj) === '[object Object]') {
            let arr = [];
            for (let attr in obj) {
                arr.push(attr + '=' + obj[attr]);
            }
            return arr.join('&');
        }
    }

    function $ajax(option) { //option:配置参数
        let promise = new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            //1.配置请求方式
            option.type = option.type || 'get';

            //2.请求和发送的接口地址,不能为空
            if (!option.url) {
                throw new Error('接口地址不能为空');
            }

            //3.是否异步
            if (option.async === false || option.async === 'false') { //同步
                option.async = false;
            } else {
                option.async = true;
            }

            //4.传输数据 - 格式是对象 - get方式
            //数据是否存在，存在转换格式。
            if (option.data && option.type === 'get') { //数据存在，请求方式是get
                option.url += '?' + objtostring(option.data);
            }
            xhr.open(option.type, option.url, option.async);

            //4.传输数据 - 格式是对象 - post方式
            //数据是否存在，存在转换格式。
            if (option.data && option.type === 'post') { //数据存在，请求方式是post
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send(objtostring(option.data));
            } else {
                xhr.send();
            }

            //3.是否异步
            if (option.async) { //异步,需要就绪状态码完成
                xhr.onload = function() {
                    if (xhr.readyState === 4) { //send解析完成
                        if (xhr.status === 200) { //接口地址正确
                            resolve(xhr.responseText)
                        } else {
                            reject('接口地址有误');
                        }
                    }
                }
            } else { //同步,代码顺序加载，无需就绪状态码。
                if (xhr.status === 200) {
                    resolve(xhr.responseText)
                } else {
                    reject('接口地址有误');
                }
            }
        });
        return promise;
    }
    //对象的参数不要去修改，后期有类似的方法。
    $ajax({
        type: 'post', //请求方式，默认get
        url: 'http://localhost/JS2104/Day18_ajax/data/taobao.php', //请求发送的接口地址,不能为空。
        data: { //数据格式是对象
            a: 1,
            b: 2,
            c: 3
        },
        async: 'false' //是否异步，默认异步
    }).then((data) => {
        console.log(data);
    });
</script>